<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>content</title>
   <style type="text/css" media="screen">
     *{margin:0; padding: 0;}


body{
   font-family: 微软雅黑;
   font-size: 14px;}
   .box{width:1349px;
        margin:0 auto;
     }
    #C{color:#a74b08;}
.topbar{
   width:1349px;
   height:76px;
   background:
   -webkit-radial-gradient(circle,white,rgb(230,230,230));
    
    }
.nav{    position: absolute;
          top:30px;
         margin-left: 47%;
    }
.nav a{
        display: inline-block;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        color:#999;}
   .nav a:hover{
        -webkit-transform:rotate(10deg);
        -moz-transform:rotate(10deg);
        -o-transform:rotate(10deg);
        -ms-transform:rotate(10deg);
        transform:rotate(10deg);
      }

.nav li{
   position:relative;
        display:inline-block;
        padding:0 16px;
        font-size: 18px;
        list-style: none outside none;
      }
.nav li:not(:last-of-type):after{
content:"";
width:1px;
height:16px;
position:absolute;
top:50%;
margin-top:-8px;
right:0;
background-image:
linear-gradient(to bottom,#999,#666);
      }
/*删除第一项和最后一项导航分隔线*/
.nav1 li:first-child::before{
 display: none;
   }
.nav1 li:last-child::after{
   display: none;
 }
 .nav a,.nav a:hover{
  
  text-decoration: none;
    }

.mid{
   width:1349px;
   height: 280px;
   border-top:1px solid black;
   background-image:
    -webkit-radial-gradient(circle,#c3610a ,#580e03); 
    border-bottom:1px solid black;}
.touming{

   width: 1349px;
   height: 260px;
   background:rgba(250,250,250,.1);
   position: relative;
   top: 10px;
}
.foot{
  width: 1349px;
   height: 270px;
   background:rgba(250,250,250,.1);
   position: relative;
   top: 30px;
}
.mid_1{
   height:340px; 
   background:rgba(250,250,250,.1);
   margin:0 auto;
}

.mid2{
background:url(http://r.photo.store.qq.com/psb?/V113HDNt1bzBnf/4tq2KNRJ3ecTEOqtkMQLb5mDz531R2*zgXx23YJeBhw!/r/dAoBAAAAAAAA) no-repeat center center scroll;
background-size: cover;
width: 1349px;
height: 383px;
/*background-image: */
/*linear-gradient(to bottom,#d8dbd9,white,#efefef);*/
}


.logo{position: absolute;top: -25px; margin-left: 15%;}

.footerend{width: 1349px;
height: 40px;
background-image:linear-gradient(to left, #580e03,#c3610a,#580e03); }


.footerend p{line-height: 40px;
   margin-left: 100px; 
   opacity: .7;
    float: left;}
.footerend p a{text-decoration:none; 
     color:yellow;
   }
.footerend p a:hover{color:orange;}
.cartoon{margin-left: 66%;margin-top: 40px;
  box-shadow: 2px 6px 25px black;}
.touming h1{color: #f6f0ea; margin-left: 16%; position: relative;
top: 10%;float:left;}
.list{width: 1300px; margin-left:3%; line-height: 2em;}
.mid2 ul{list-style: none;text-align: center;}
.mid2 ul li{float: left; 
  font-family:微软雅黑;
  width:200px;
   height: 260px;
background: rgba(0, 0, 0, .2);
margin-left: 10px;position:relative;top:40px; }
.mid2 ul li p{font-size: 24px; color:brown; position: relative;top: 14px;}
.mid2 ul li a{text-decoration: none; color:brown; font-size: 16px;
  font-family: 微软雅黑;}
.mid2 ul li a:hover{color:#fce17e; text-decoration: underline;}
.a1{position: relative;top:43px;}
.a1{ padding: 6px; 
  box-shadow: 5px 5px 16px black;
    margin-left: 200px;}

.b1{position: absolute;left: 0;margin-top: 60px; margin-left: 160px;}
.b1:hover{transform: translate(200px,0); transition: 1s;}
.thank{color: white;font-family: forte;
font-size: 18px;
margin-top: -120px;position: relative;margin-left: 400px;}


   </style>
</head>
<body>
   <div class="box">

<div class="topbar">
  <img class="logo" src="http://r.photo.store.qq.com/psb?/V113HDNt1bzBnf/XbAOJGF9h0b4YRG9mrFAc0AkseJrvazvPsn*jNSVWAQ!/r/dI8AAAAAAAAA" width="200px" height="170px">
  <div class="topnav">
      <ul class="nav">
        <li><a href="http://lllsyj.oschina.io/click-in/">Home</a></li>
        <li><a href="http://lllsyj.oschina.io/about/">About</a></li>
        <li><a id="C" href="http://lllsyj.oschina.io/content/">Content</a></li>
      </ul>
  </div>
</div>
<div class="mid">
     <div class="touming">
     
       <img class="a1" src="http://r.photo.store.qq.com/psb?/V113HDNt1bzBnf/Rsw72Crv3iTzxL4Nli.STIy7UnjubnLF6yaz.DnjRdw!/r/dOQAAAAAAAAA" width="180px" height="180px">

       <h1>All Of Our Secondary Pages</h1>
       <img class="b1" src="http://r.photo.store.qq.com/psb?/V113HDNt1bzBnf/BtfrUBELkemMXbZMkbjn2os2I9Oo0yVKkNCftHvToRU!/r/dHcBAAAAAAAA" width="250px" height="200px">
       <p class="thank">Thanks everything.<br>Thanks for meeting you!<br>Love your life,<br>love the people by your side;</p>
</div>
     </div>


<div class="mid2">
   <div class="list">
   <ul>
      <li>
         <p>ZMZ Secondary Pages</p><br>
      <a href="网页  14电商A班郑敏珍   2014020101045/html/主页.html" target="_blank">Home</a><br>
      <a href="网页  14电商A班郑敏珍   2014020101045/html/个人简介.html" target="_blank">Introduce</a><br>
      <a href="网页  14电商A班郑敏珍   2014020101045/html/参演电影.html" target="_blank">Movies</a><br>
      <a href="网页  14电商A班郑敏珍   2014020101045/html/获奖记录.html" target="_blank">Award</a><br>
      <a href="网页  14电商A班郑敏珍   2014020101045/html/人物评价.html" target="_blank">Assess</a><br>
      <a href="网页  14电商A班郑敏珍   2014020101045/html/纪念保罗.html" target="_blank">Honer</a>
      </li>
      <li>
      <p>ZQQ Secondary Pages</p><br>
      <a href="14电商B 周倩群 48号/2.html" target="_blank">Home</a><br>
      <a href="14电商B 周倩群 48号/4.html" target="_blank">Introduce</a><br>
      <a href="14电商B 周倩群 48号/5.html" target="_blank">Memory</a><br>
      <a href="14电商B 周倩群 48号/6.html" target="_blank">Feeling</a>
     </li>
      <li>
      <p>HZF Secondary Pages</p><br>
      <a href="14电商B 黄贞凤/终极版本.html" target="_blank">Home</a><br>
      <a href="14电商B 黄贞凤/3成长.html.html" target="_blank">Growth</a><br>
      <a href="14电商B 黄贞凤/2大学.html.html" target="_blank">College</a>
      </li> 
      <li>
         <p>SLY Secondary Pages</p><br>
      <a href="苏莉媛二级页面/我的个人信息表.html" target="_blank">Personal Information</a><br>
      <a href="苏莉媛二级页面/book.html" target="_blank">BOOK ROOM</a><br>
      <a href="苏莉媛二级页面/html5.html" target="_blank">Hotel</a>
      </li>
      <li><img src="http://r.photo.store.qq.com/psb?/V113HDNt1bzBnf/AJWMYSzeazI1zdjkmtro88*8AUzjADj.o6oDHCzlQzU!/r/dI0BAAAAAAAA" width="200px" height="200px"></li>
      <li><img src="http://r.photo.store.qq.com/psb?/V113HDNt1bzBnf/4uRk3DewFXO3Z7nXU6Nb1XLmin5mbkMTs.ZmFk*ukfo!/r/dHcBAAAAAAAA" width="200px" height="200px"></li>
   </ul>
   </div>
</div>

 


<div class="footerend">
   <p><a href="#">460507640@qq.com</a></p>
   <p><a href="苏莉媛二级页面/我的个人信息表.html" target="_blank">Author:Lili soe</a></p>
</div>

</div>
</body>
</html>